<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { searchIP } from "@/api/search/shodan";

defineOptions({
  name: "ScanHost"
});

const loading = ref(false);
const resultVisiable = ref(false);
const queryForm = reactive({
  host: "219.130.135.190"
});
const responseData = ref([]);

onMounted(() => {});
function onQuery() {
  loading.value = true;
  resultVisiable.value = false;
  searchIP(queryForm.host).then(resp => {
    console.log(resp);
    responseData.value = resp.data;
    resultVisiable.value = true;
    loading.value = false;
  });
}
</script>

<template>
  <div>
    <h1>主机端口扫描</h1>
    <el-form :model="queryForm">
      <el-form-item>
        <el-input v-model="queryForm.host" placeholder="输入IP地址一键扫描" />
      </el-form-item>
      <el-button
        class="w-full mt-4"
        size="default"
        type="primary"
        :loading="loading"
        @click="onQuery()"
        >开始扫描</el-button
      >
    </el-form>
    <el-divider />
    <div v-show="resultVisiable">
      <h3>{{ queryForm.host }}端口扫描结果</h3>
      <el-table highlight-current-row :data="responseData" style="width: 100%">
        <el-table-column type="index" width="50" />
        <el-table-column prop="port" label="端口" width="180" />
        <el-table-column prop="_shodan.module" label="服务" width="180" />

        <el-table-column label="版本信息">
          <template #default="scope">
            {{
              typeof scope.row.product == "undefined"
                ? ""
                : scope.row.product + " " + scope.row.version
            }}
          </template>
        </el-table-column>
        <el-table-column prop="timestamp" label="更新时间" width="250" />
      </el-table>
    </div>
  </div>
</template>

<style scoped>
h1,
h3 {
  margin-top: 20px;
  margin-bottom: 10px;
  text-align: center;
}
.result-container {
  padding: 5px 20px 10px;
  background-color: white;
}
</style>
